﻿@namespace BlazorFluentUI
@*This is a temporary solution until we find a better place for this css.*@
<style>
    @BlazorFluentUI.Models.Keyframes.DefaultKeyFrames

    :root{
        @(GetGlobalVariables())
    }

    @@font-face {
        font-family: "FluentSystemIcons-Regular";
        src: url("./_content/BlazorFluentUI.CoreComponents/FluentSystemIcons-Regular.ttf") format("truetype");
    }
    @@font-face {
        font-family: "FluentSystemIcons-Filled";
        src: url("./_content/BlazorFluentUI.CoreComponents/FluentSystemIcons-Filled.ttf") format("truetype");
    }

    i[class^="icon-"], i[class*=" icon-"] {
        font-style: normal;
        font-weight: normal !important;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }


        body {
            color: var(--semanticTextColors-BodyText);
            background-color: var(--semanticColors-BodyBackground);
            font-size: 15px;
            font-family: Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
            -webkit-font-smoothing: antialiased;
        }

    .mediumFont {
        font-size: @(ThemeProvider?.Theme.FontStyle.FontSize.Medium);/*var(--fontSize-Medium);*/
        font-weight: @(ThemeProvider?.Theme.FontStyle.FontWeight.Regular);/*var(--fontWeight-Regular);*/
    }

    .largeFont {
        font-size: @(ThemeProvider?.Theme.FontStyle.FontSize.Large);/*var(--fontSize-Large);*/
        font-weight: @(ThemeProvider?.Theme.FontStyle.FontWeight.Regular);/*var(--fontWeight-Regular);*/
    }

    .xlargeFont {
        font-size: @(ThemeProvider?.Theme.FontStyle.FontSize.XLarge); /*var(--fontSize-XLarge);*/
        font-weight: @(ThemeProvider?.Theme.FontStyle.FontWeight.SemiBold); /*var(--fontWeight-SemiBold);*/
    }

    .disabledBodyScroll {
        overflow: hidden !important;
    }

    .slideDownIn10 {
        animation: Slide_down_in_10 @(ThemeProvider?.Theme.Animation.Duration3) @(ThemeProvider?.Theme.Animation.EasingFunction1);
    }

    .slideDownIn20 {
        animation: Slide_down_in_20 @(ThemeProvider?.Theme.Animation.Duration3) @(ThemeProvider?.Theme.Animation.EasingFunction1);
    }

    .slideRightIn10 {
        animation: Slide_right_in_10 @(ThemeProvider?.Theme.Animation.Duration3) @(ThemeProvider?.Theme.Animation.EasingFunction1);
    }

    .slideRightIn40 {
        animation: Slide_right_in_40 @(ThemeProvider?.Theme.Animation.Duration3) @(ThemeProvider?.Theme.Animation.EasingFunction1);
    }

    .slideUpIn10 {
        animation: Slide_up_in_10 @(ThemeProvider?.Theme.Animation.Duration3) @(ThemeProvider?.Theme.Animation.EasingFunction1);
    }

    .slideLeftIn10 {
        animation: Slide_left_in_10 @(ThemeProvider?.Theme.Animation.Duration3) @(ThemeProvider?.Theme.Animation.EasingFunction1);
    }

    .slideLeftIn40 {
        animation: Slide_left_in_40 @(ThemeProvider?.Theme.Animation.Duration3) @(ThemeProvider?.Theme.Animation.EasingFunction1);
    }

    .slideRightOut40 {
        animation: Slide_right_out_40 @(ThemeProvider?.Theme.Animation.Duration3) @(ThemeProvider?.Theme.Animation.EasingFunction1);
    }

    .slideLeftOut40 {
        animation: Slide_left_out_40 @(ThemeProvider?.Theme.Animation.Duration3) @(ThemeProvider?.Theme.Animation.EasingFunction1);
    }

    .fadeIn100 {
        animation: Fade_in @(ThemeProvider?.Theme.Animation.Duration1) @(ThemeProvider?.Theme.Animation.EasingFunction2);
    }

    .fadeOut100 {
        animation: Fade_out @(ThemeProvider?.Theme.Animation.Duration1) @(ThemeProvider?.Theme.Animation.EasingFunction2);
    }

    .fadeIn200 {
        animation: Fade_in @(ThemeProvider?.Theme.Animation.Duration2) @(ThemeProvider?.Theme.Animation.EasingFunction2);
    }

    .fadeOut200 {
        animation: Fade_out @ThemeProvider?.Theme.Animation.Duration2 @(ThemeProvider?.Theme.Animation.EasingFunction2);
    }

    .fadeIn400 {
        animation: Fade_in @(ThemeProvider?.Theme.Animation.Duration3) @(ThemeProvider?.Theme.Animation.EasingFunction2);
    }

</style>

<CascadingValue Value="ThemeProvider?.Theme" Name="Theme">
    <div dir="ltr">
        @*This is a fix to allow some fonts to display properly.  We may want to move this later.*@
        @ChildContent
    </div>
</CascadingValue>

@code {
    [Inject]
    public ThemeProvider? ThemeProvider { get; set; }

    [Parameter]
    public IPalette? InitialPalette { get; set; }
    [Parameter]
    public ISemanticColors? InitialSemanticColors { get; set; }
    [Parameter]
    public ISemanticTextColors? InitialSemanticTextColors { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    private bool firstThemeCheck;

    protected override void OnInitialized()
    {
        ThemeProvider?.ThemeComponents.Add(this);
        base.OnInitialized();
    }

    protected override Task OnParametersSetAsync()
    {
        if (firstThemeCheck == false && InitialPalette != null)
        {
            firstThemeCheck = true;
            if (InitialSemanticColors != null && InitialSemanticTextColors != null)
            {
                ThemeProvider?.UpdateTheme(InitialPalette, InitialSemanticColors, InitialSemanticTextColors);
            }
            else
            {
                ThemeProvider?.UpdateTheme(InitialPalette);
            }
        }
        return base.OnParametersSetAsync();
    }

    public void UpdateTheme()
    {
        InvokeAsync(() => StateHasChanged());
    }

    private string GetGlobalVariables()
    {
        System.Text.StringBuilder sbuilder = new System.Text.StringBuilder("");

        try
        {
            if (this.ThemeProvider != null && this.ThemeProvider.Theme != null)
            {
                var props = ThemeProvider.Theme.Palette.GetType().GetProperties();
                foreach (var prop in props)
                {
                    var name = prop.Name;
                    System.Diagnostics.Debug.WriteLine($"Name: {name}");
                    var val = prop.GetValue(this.ThemeProvider?.Theme.Palette, null);
                    sbuilder.Append($"--palette-{name}: {val};");
                }

                props = ThemeProvider.Theme.SemanticColors.GetType().GetProperties();
                foreach (var prop in props)
                {
                    var name = prop.Name;
                    sbuilder.Append($"--semanticColors-{name}: {prop.GetValue(this.ThemeProvider?.Theme.SemanticColors, null)};");
                }

                props = ThemeProvider.Theme.SemanticTextColors.GetType().GetProperties();
                foreach (var prop in props)
                {
                    var name = prop.Name;
                    sbuilder.Append($"--semanticTextColors-{name}: {prop.GetValue(this.ThemeProvider?.Theme.SemanticTextColors, null)};");
                }

                props = ThemeProvider.Theme.Effects.GetType().GetProperties();
                foreach (var prop in props)
                {
                    var name = prop.Name;
                    sbuilder.Append($"--effects-{name}: {prop.GetValue(this.ThemeProvider?.Theme.Effects, null)};");
                }

                props = ThemeProvider.Theme.Depths.GetType().GetProperties();
                foreach (var prop in props)
                {
                    var name = prop.Name;
                    sbuilder.Append($"--depths-{name}: {prop.GetValue(this.ThemeProvider?.Theme.Depths)};");
                }

                props = ThemeProvider.Theme.Animation.GetType().GetProperties();
                foreach (var prop in props)
                {
                    var name = prop.Name;
                    sbuilder.Append($"--animation-{name}: {prop.GetValue(this.ThemeProvider?.Theme.Animation)};");
                }

                props = ThemeProvider.Theme.CommonStyle.GetType().GetProperties();
                foreach (var prop in props)
                {
                    var name = prop.Name;
                    sbuilder.Append($"--commonStyle-{name}: {prop.GetValue(this.ThemeProvider?.Theme.CommonStyle)};");
                }

                props = ThemeProvider.Theme.FontStyle.FontSize.GetType().GetProperties();
                foreach (var prop in props)
                {
                    var name = prop.Name;
                    sbuilder.Append($"--fontSize-{name}: {prop.GetValue(this.ThemeProvider?.Theme.FontStyle.FontSize)};");
                }

                props = ThemeProvider.Theme.FontStyle.FontWeight.GetType().GetProperties();
                foreach (var prop in props)
                {
                    var name = prop.Name;
                    sbuilder.Append($"--fontWeight-{name}: {prop.GetValue(this.ThemeProvider?.Theme.FontStyle.FontWeight)};");
                }

                props = ThemeProvider.Theme.FontStyle.IconFontSize.GetType().GetProperties();
                foreach (var prop in props)
                {
                    var name = prop.Name;
                    sbuilder.Append($"--iconFontSize-{name}: {prop.GetValue(this.ThemeProvider?.Theme.FontStyle.IconFontSize)};");
                }

                props = ThemeProvider.Theme.ZIndex.GetType().GetProperties();
                foreach (var prop in props)
                {
                    var name = prop.Name;
                    sbuilder.Append($"--zIndex-{name}: {prop.GetValue(this.ThemeProvider?.Theme.ZIndex)};");
                }
            }
        }
        catch (Exception ex)
        {
            sbuilder.Append($"--exception:{ex.Message}");
        }

        return sbuilder.ToString();
    }

}
